<template>
  <div class="dashboard-container" style="text-align: center" id="container">
<!--    <div style="position: fixed;color: red">PS:请在网址中添加：'？missionId=xxx&messageMission=xxx'获取有效信息</div>-->
    <h1 style="margin: 5px 0 -5px 0">指挥信息板</h1>
    <div class="app-container">
      <div class="grid">
        <div class="left">
          <div class="left-left">
            <div>
              <!--          任务名称-->
              <div class="TaskName">
                <img src="../../assets/common/logo.png" alt="" style="width: 80%; height: 80%">
                <div>
                  任务名称: <span style="font-weight:bold;">{{TaskInfo.missionName}}</span>
                </div>
              </div>
            </div>
            <div>
              <!--            任务id-->
              <div class="TaskId">
                <div style="padding-top: 4vh">
                        <span style="font-weight: bold">
                        任务id:
                      </span>
                  <span>
                         {{TaskInfo.missionId}}
                      </span>
                </div>

              </div>
            </div>
            <div>
              <div class="TaskAnnouncement">
                <h4 style="">任务公告</h4>
                <el-divider></el-divider>
                {{TaskInfo.missionNotice}}
              </div>
            </div>
          </div>
          <div class="left-right">
            <div  class="center-top">
              <div style="margin: 1px">
                <!--          任务描述-->
                <div class="TaskDescription">
                  <div style="padding-top: 6vh">
                    <span style="font-weight: bold">任务描述</span>:
                    <span>
            {{TaskInfo.missionIntroduction}}
          </span>
                  </div>
                </div>
              </div>
              <div>
                <!--          招募人数-->
                <div class="NumberOfRecruits">
                  <div style="padding-top: 6vh">
                    <span style="margin: 3px;font-weight: bold">招募人数</span>:
                    <span>
            {{TaskInfo.missionMember}}
          </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="center-bottom">
              <div style="overflow: auto">
                <!--            已出发情况-->
                <div class="Departed">
                  <div class="block">
                    <div style="font-size: 2vh;margin: 5px 0 10px 0;font-weight: bold">
                      已出发情况
                    </div>
                    <el-timeline :reverse="reverse" style="padding-left: -3vw">
                      <el-timeline-item
                        v-for="item in taskActivities"
                        type="success"
                        :key="item.messageId"
                        :timestamp="item.messageTime" style="margin-left: -30px">
                        <div style="font-size: 8px;margin-left: -18px">
                          {{item.moveMember}}已从{{item.moveStartLocation}}出发
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
              </div>
              <div>
                <!--            已完成情况-->
                <div class="Returned">
                  <div class="block ">
                    <div style="font-size: 2vh;margin: 5px 0 10px 0;font-weight: bold">
                      已完成情况
                    </div>
                    <el-timeline :reverse="reverse" >
                      <el-timeline-item
                        v-for="item in taskActivities"
                        :key="item.messageId"
                        :timestamp="item.moveTime" style="margin-left: -30px">
                        <div style="font-size: 8px;margin-left: -18px">
                          {{item.moveMember}}已到达{{item.moveEndLocation}}
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
              </div>
              <div>
                <!--            参与人员-->
                <div class="OtherMembers">
                  <div style="font-size: 2vh;margin: 5px 0 10px 0;font-weight: bold">
                    参与人员
                  </div>
                  <div class="block ">
                    <el-timeline :reverse="reverse">
                      <el-timeline-item
                        v-for="item in taskActivities"
                        :key="item.messageId"
                        :timestamp="item.messageTime" style="margin-left: -30px">
                        <div style="font-size: 6px;margin-left: -18px">
                          参与人员：{{item.moveMember}}
                        </div>
                      </el-timeline-item>
                    </el-timeline>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <!--          任务时间线-->
          <div class="TaskTimeline" style="overflow:auto">
            <div class="block ">
              <div class="radio timeline" style="margin-bottom: -15px">
                <div style="font-weight: bold;margin: 5px 0 0 0;">任务时间线：</div>
                <el-radio-group v-model="reverse">
                  <el-radio :label="false">正序</el-radio>
                  <el-radio :label="true">倒序</el-radio>
                </el-radio-group>
              </div>
              <el-divider></el-divider>
              <el-timeline :reverse="reverse" style="margin-top: -10px">
                <el-timeline-item
                  v-for="item in taskActivities"
                  :key="item.messageId"
                  style="margin-left: -33px"
                  :timestamp="item.moveTime">
                  <div style="margin-left: -15vw;font-weight: bold">
                    {{item.moveStyle}}
                  </div>
                  <div style="font-size: 12px;padding-top: 5px;margin-left: -20px">
                    {{item.moveMember}} {{item.moveHow}}由{{item.moveStartLocation}}到达{{item.moveEndLocation}}
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        reverse: true
      }
    },
    computed: {
      TaskInfo: function () {
        // missionAdmin:"63,"                                                任务管理员
        // missionChief:""                                                   特派团团长
        // missionCode:"123456"                                              任务编码
        // missionId:1                                                       任务Id
        // missionImage:"IMG_20221007_190429.jpg,mmexport1667287215116.jpg" 任务图像
        // missionIntroduction:"应急备勤"                                     任务介绍
        // missionMember:"1,"                                               任务成员
        // missionName:"应急备勤"                                             任务名称
        // missionNotice:"今日备勤群在这里"                                    传教通知
        // missionNumber:"100"                                               任务数量
        return this.$store.getters.taskInfo
      },
      taskActivities: function () {
        // messageGroup:"1"                   消息组
        // messageId:8                        消息ID
        // messageMission:"1"                 消息任务
        // messageOwner:"1"                   消息所有者
        // messageTime:"2022-10-07 16:09:34"  消息时间
        // messageType:3                      消息类型
        // moveEndLocation:"队部"              移动结束位置
        // moveHow:"开车"                      移动方式
        // moveMember:"韦莫杰鸣"                移动成员
        // moveStartLocation:"固点"            移动开始位置
        // moveStyle:"出发报备"                 移动样式
        // moveTime:"2022-10-07 16:09:00"     移动时间
        return this.$store.getters.allTaskInfo
      }
    },
    mounted() {
      if (this.$route.query.hasOwnProperty('missionId') && this.$route.query.hasOwnProperty('messageMission')) {
        this.$store.dispatch('task/getInfo', this.$route.query)
        this.$store.dispatch('task/getAllInfo', this.$route.query)
      } else if (this.$route.query.hasOwnProperty('messageMission')) {
        this.$store.dispatch('task/getAllInfo', this.$route.query)
      } else if (this.$route.query.hasOwnProperty('missionId')) {
        this.$store.dispatch('task/getInfo', this.$route.query)
      } else {
        console.log('暂未传入query参数')
      }
    }
  }
</script>

<style scoped>
  body {
    margin: 0;
    height: 100vh;
  }

  .grid {
    height: 88vh;
    display: grid;
    grid-template-columns: 3fr 1fr;
  }

  .left {
    /*background-color: #84a9fe;*/
    display: grid;
    grid-template-columns: 1fr 3fr;
  }

  .right {
    /*background-color: yellowgreen;*/
  }

  .left-left {
    /*background-color: #454545;*/
    display: grid;
    grid-template-rows: 25vh 25vh 45vh;
  }

  .left-right {
    /*background-color: darkseagreen;*/
    display: grid;
    grid-template-rows: 30vh 70vh;
  }

  .center-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }

  .center-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  /*任务名称*/
  .TaskName {
    height: 100%;
    width: 100%;
    margin: 2px;
    text-align: center;
    border: 1px black solid;
  }

  /* 任务描述*/
  .TaskDescription {
    height: 100%;
    margin: 2px;
    border: 1px black solid;
    text-align: center;
  }

  /*招募人数*/
  .NumberOfRecruits {
    height: 100%;
    margin: 1px;
    border: 1px black solid;
    text-align: center;
  }

  .TaskAnnouncement {
    height: 100%;
    border: 1px black solid;
    margin-top: 2px;
    text-align: center;
  }

  /*任务ID*/
  .TaskId {
    height: 100%;
    border: 1px black solid;
    text-align: center;
    margin: 4px -2px 6px 0;
  }

  /*任务时间线*/
  .TaskTimeline {
    /*width: 50%;*/
    height: 95%;
    margin: 2px;
    border: 1px black solid;
    overflow: auto;
  }

  .timeline {
    margin: 1%;
  }
  /*其他成员*/
  .OtherMembers {
    height: 90%;
    margin: 2px 4px;
    border: 1px black solid;
    overflow: auto;
  }

  /*已返回情况*/
  .Returned {
    height: 90%;
    overflow: auto;
    padding-top: 5px;
    margin: 2px 4px;
    border: 1px black solid;
  }

  .Departed {
    height: 90%;
    overflow: auto;
    padding-top: 5px;
    margin: 2px 4px;
    border: 1px black solid;
  }
</style>
